<template>
  <div class="listdetail">
    <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="onClickLeft" fixed/>
    <div class="list-content">
      <ul class="list1">
        <li>订单编号:{{list.orderCode}}</li>
        <li>订单名称:{{list.orderName}}</li>
      </ul>
      <div class="item">
        <ul class="list">
          <li>箱子编号:{{list.boxCode}}</li>
          <li>箱子id:{{list.boxId}}</li>
        </ul>
        <ul class="list">
          <li>箱子规格:{{list.boxStandard}}</li>
          <li>箱子积分单价:{{list.boxUnitPrice}}</li>
        </ul>
        <ul class="list">
          <li>租赁时长:{{list.leaseDuration}}小时</li>
          <li>实付积分:{{list.boxUnitPrice}}</li>
        </ul>
        <div
          v-if="list.status===4||list.status===5||list.status===6||list.status===7||list.status===8"
          class="heavy"
        >
          <ul class="list">
            <li>行李箱提取时间:{{list.createTime}}</li>
          </ul>
          <ul class="list">
            <li>行李箱提取姓名:{{list.heavyBoxCallName}}</li>
          </ul>
          <ul class="list">
            <li>行李箱提取电话:{{list.heavyBoxCallPhone}}</li>
          </ul>
          <ul class="list">
            <li>行李箱提取地址:{{list.heavyBoxCallAddress}}</li>
          </ul>
        </div>
        <div
          v-if="list.status===1||list.status===2||list.status===3"
          class="empty"
        >
          <ul class="list">
            <li>行李箱下单时间:{{list.createTime}}</li>
          </ul>
          <ul class="list">
            <li>行李箱下单姓名:{{list.emptyBoxCallName}}</li>
          </ul>
          <ul class="list">
            <li>行李箱下单电话:{{list.emptyBoxCallPhone}}</li>
          </ul>
          <ul class="list">
            <li>行李箱下单地址:{{list.emptyBoxCallAddress}}</li>
          </ul>
        </div>
      </div>
      <ul class="list-down">
        <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          订单状态:{{list.remark}}
        </li>
        <li class="butt">
          <van-button type="info" @click="operate" v-show="list.status == 1">存储成功</van-button>
          <van-button type="info" @click="application(list)" v-show="list.status == 2">申请转运</van-button>
          <van-button type="info" @click="operate()" v-show="list.status == 5">预约提取</van-button>
          <van-button type="info" @click="operate()" v-show="list.status == 6">订单完成</van-button>
          <van-button type="info" @click="dialog" v-show="list.status == 7">删除订单</van-button>
        </li>
        <li class="butt3">
          <van-button type="info" @click="operate" v-show="list.status == 2">预约提取</van-button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import {Dialog} from "vant";

  export default {
    components: {
      [Dialog.Component.name]: Dialog.Component
    },
    mounted() {
      this.getData();
    },
    data() {
      return {
        list: []
      };
    },
    methods: {
      onClickLeft() {
        this.$router.push("/entlist");
      },
      getData() {
        let paramForm = {
          id: this.$route.params.id
        };
        this.$axios
          .get("prod-api/app/order/info/" + paramForm.id, paramForm)
          .then(res => {
            if (200 == res.data.code) {
              this.list = res.data.data;
              if (this.list.status == 1) {
                this.list.remark = "已经预约";
              } else if (this.list.status == 2) {
                this.list.remark = "正在存储";
              } else if (this.list.status == 3) {
                this.list.remark = "等待转运或提取";
              } else if (this.list.status == 4) {
                this.list.remark = "正在转运";
              } else if (this.list.status == 5) {
                this.list.remark = "行李到达";
              } else if (this.list.status == 6) {
                this.list.remark = "等待完成";
              } else if (this.list.status == 7) {
                this.list.remark = "订单完成";
              }
            }
          });
      },
      application() {
        let operate = 0;
        let list = this.list;
        if (this.list.status == 2) {
          operate = 3;
        }
        this.$router.push({
          name: "operate",
          params: {
            id: list.id,
            operate: operate,
            version: list.version,
            status: this.status
          }
        });
      },
      operate() {
        let operate = 0;
        let list = this.list;
        if (this.list.status == 1) {
          operate = 2;
        } else if (list.status == 2) {
          operate = 6;
        } else if (list.status == 5) {
          operate = 6;
        } else if (list.status == 6) {
          operate = 7;
        } else if (list.status == 7) {
          operate = 8;
        }
        let paramForm = {};
        paramForm = {};
        this.$axios
          .put(
            "prod-api/app/order/operate/" +
            list.id +
            "/" +
            operate +
            "/" +
            list.version,
            paramForm
          )
          .then(res => {
            if (200 == res.data.code) {
              this.$toast.success("操作成功");

              this.$router.go(0);
            } else {
              this.$toast.fail("操作失败");
            }
          });
      },
      dialog() {
        Dialog.confirm({
          title: "!",
          message: "是否要删除该订单"
        })
          .then(() => {
            this.del();
          })
          .catch(() => {
            // on cancel
          });
      },
      del() {
        let paramForm = {};
        let list = this.list;
        let operate = 8;
        paramForm = {};

        this.$axios
          .put(
            "prod-api/app/order/operate/" +
            list.id +
            "/" +
            operate +
            "/" +
            list.version,
            paramForm
          )
          .then(res => {
            if (200 == res.data.code) {
              this.$toast.success("操作成功");
              if (this.$route.params.operate == 8) {
                this.$router.push("/entlist");
              } else {
                this.$router.go(-1);
              }
            } else {
              this.$toast.fail("操作失败");
            }
          });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .list-content {
    height: 100%;
    background-color: #eee;
    margin-top: 46px;
    overflow: scroll;
  }

  .van-nav-bar {
    background: url("../assets/bg2.png");
  }

  .list {
    width: 92%;
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #eee;
    margin: 0 auto;
    font-size: 14px;
    box-sizing: border-box;
  }

  .van-nav-bar {
    color: #fff;
  }

  .van-nav-bar__text {
    color: #fff;
  }

  .list1 {
    width: 95%;
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    background-color: #eee;
    margin: 0 auto;
    font-size: 14px;
    box-sizing: border-box;
    color: dimgray;
  }

  .item {
    width: 100%;
    margin-top: 20px;
    background: #fff;
  }

  .list-item {
    text-align: center;
  }

  .list-content {
    margin-top: 46px;
    overflow: scroll;
  }

  .listdetail {
    position: relative;
    height: 100%;
    background-color: #eee;

    .list-down {
      margin-top: 40%;

      position: relative;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      height: 55px;
      line-height: 55px;
      font-size: 14px;
      bottom: 0;

      .butt {
        position: absolute;
        top: 2px;
        right: 2px;
      }

      .butt3 {
        position: absolute;
        top: 2px;
        margin: 0 auto;
      }
    }
  }
</style>
